<% cache('feature_questions-header', skip_digest: true) do %>
  <%= feature('questions-header') %>
<% end %>

<div class="question-area col-md-12">
  <div class= "question-header">
   <h5><%=translation('questions.index_shadow.what_is_your_question')%></h5>
   <% if !current_user %>
     <p><%=translation('questions.index_shadow.to_ask_a_question_please')%><a class="requireLogin" href="/questions"><%=translation('questions.index_shadow.log_in')%></a><%=translation('questions.index_shadow.or')%> <a class="requireLogin" href="/questions"><%=translation('questions.index_shadow.sign_up')%></a><%=translation('questions.index_shadow.first')%></p>
   <% end %>
  </div>
 <div class= "question-form">
    <form id="questions_searchform" role="search" autocomplete="off" action="/post">
      <div class="input-group">
        <textarea tabindex="1" id="questions_searchform_input" type="text" name="title" class="<%= "disabled " if !current_user %>form-control search-query typeahead" qryType="questions" placeholder="<%= translation('questions.index_shadow.type_question') %>"></textarea>
        <input type="hidden" name="tags" value="question:general">
        <input type="hidden" name="template" value="question">
        <input type="hidden" name="redirect" value="question">
      </div>
      <div class="input-group-append"  style="padding-bottom:15px;">
        <button id="question_search" type="submit" rel="tooltip" title="<%=translation('questions.index_shadow.ask_question')%>" class="btn btn-primary"><%=translation('questions.index_shadow.continue')%></button>
      </div>
    </form>
  </div>
</div>

<div class="FeaturedQuestions col-md-12">
  <span class="d-none d-lg-inline"><h2><%= translation('questions.index_shadow.featured_questions') %> </h2></span>
  <span><h6><%= translation('questions.index_shadow.great_questions') %></h6></span>
</div>

<%= render partial: "questions/questions_shadow" %>

<div class="RecentQuestions col-md-12">
  <span class="d-none d-lg-inline"><h2><%= translation('questions.index_shadow.recent_questions') %> </h2></span>
</div>

<div class="col-md-12">
  <%= render partial: "questions/recent_questions_shadow" %>
</div>

 <style>
  .question-area{
    margin:auto;
    width:70%;
    background-color: #F5F5F5;
    height: auto;
    border-radius: 10px;
  }

  .question-header, .question-form{
    margin:auto;
    width:90%;
    text-align: center;
  }

  .question-header{
    padding-top: 20px;
  }

  .input-group{
    padding-bottom: 20px;
    padding-bottom: 15px;
  }

  .input-group-append{
    float: right;
  }

  textarea {
    resize: none;
    height: 170px;
  }

  .FeaturedQuestions, .RecentQuestions{
    text-align: center;
    margin-top: 3em;
  }
 </style>
